<template>
  <div class="mod-menu">
    <div class="mb10">
      <el-button @click="getBack">返回商品列表</el-button>
    </div>
    <el-form :inline="true" :model="pamars">
      <el-form-item label="开团时间">
         <el-date-picker v-model="date" type="daterange"  value-format="yyyy-MM-dd"     format="yyyy-MM-dd"  @change="changeDate" placeholder="开团时间" clearable></el-date-picker>
      </el-form-item>
      <el-form-item label="拼团状态">
        
        <el-select v-model="pamars.status" clearable placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
    


        
      </el-form-item>
      <el-form-item>
        <el-button @click="getDataList()">查询</el-button>
        <!-- <el-button type="primary" @click="addOrUpdateHandle()">添加</el-button> -->
      </el-form-item>
    </el-form>
    <el-table :data="dataList" row-key="Id" border style="width: 100%; ">
      <el-table-column prop="goods_title" align="center" label="商品名称" width="300px">
 <template slot-scope="scope">
   <div style="display:flex;justify-content: center;    align-items: center;">
<img :src="scope.row.goods_cover" style="width:100px;height:100px" alt="">
<p>{{scope.row.goods_title}}</p>
   </div>
        
 </template>
      </el-table-column>
    
      <el-table-column prop="format_start_time" align="center" label="开团时间">
      </el-table-column>
      <el-table-column prop="complete_time" align="center" label="成团时间">
      </el-table-column>
      <el-table-column prop="format_end_time" align="center" label="截至时间">
      </el-table-column>
      <el-table-column prop="group_person_number" align="center" label="人数">
         <template slot-scope="scope">
        {{scope.row.valid_person_number}} / {{scope.row.group_person_number}}
          </template>
      </el-table-column>
      <el-table-column prop="status" align="center" label="拼团状态">
          <template slot-scope="scope">
           <el-tag v-if="scope.row.status==0">建团中</el-tag>
<el-tag type="success" v-if="scope.row.status==1">建团成功</el-tag>
<el-tag type="info"  v-if="scope.row.status==2">组团完成</el-tag>
<el-tag type="warning" v-if="scope.row.status==3">建团失败</el-tag>
 <el-tag type="warning" v-if="scope.row.status==4">组团失败</el-tag>
          </template>
      </el-table-column>
      <el-table-column fixed="right" header-align="center" align="center" label="操作">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="groupPeople(scope.row)">拼团人员</el-button>
         
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="sizeChangeHandle"
      @current-change="currentChangeHandle"
      :current-page="pamars.page"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="pamars.limit"
      :total="totalPage"
      layout="total, sizes, prev, pager, next, jumper"
    ></el-pagination>
  
    <!-- 弹窗,修改 -->
<el-dialog title="拼团人员" :visible.sync="dialogTableVisible" width="1000px">
  <el-table :data="peopleTable">
    <el-table-column property="nickname" label="人员" width="150"></el-table-column>
    <el-table-column property="order_code" label="订单编号" width="200"></el-table-column>
    <el-table-column property="leader" label="身份">
       <template slot-scope="scope">
                    <el-tag v-if="scope.row.leader">团长</el-tag>
<el-tag type="success" v-else>团员</el-tag>
       </template>
    </el-table-column>
      <el-table-column property="create_time" label="下单时间"></el-table-column>
  </el-table>
</el-dialog>
  </div>
</template>

<script>
  import seckillPdAddUpdate from './seckill-pd-add-update'
  import gbPdAdd from './gb-pd-add'
  import seviceApi from '@/api/serviceApi.js'
  export default {
    data () {
      return {
  
        pamars: {
          page: 1,
          limit: 10
  
        },
        totalPage: 0,
        dataList: [],
        dataListLoading: false,
        date: [],
  
        dialogTableVisible: false,
        peopleTable: [],
        options: [
          {
            label: '建团中',
            value: 0
          }, {
            label: '建团成功',
            value: 1
          }, {
            label: '组团完成',
            value: 2
          },
          {
            label: '建团失败',
            value: 3
          },
          {
            label: '组团失败',
            value: 4
          }
        ]
      }
    },
    components: {
      seckillPdAddUpdate,
      gbPdAdd
    },
  watch: {
    '$route' () {
      this.pamars.page = 1
      this.getList()
  }},
    mounted () {
      this.pamars.page = 1

      this.getList()
    },
  
    methods: {
      changeDate () {
        if (this.date != null && this.date.length > 0) {
          this.pamars.start_time = this.date[0]
  this.pamars.end_time = this.date[1]
        } else {
          delete (this.pamars.start_time)
          delete (this.pamars.end_time)
        }
      },
  
      // 获取列表
      getList () {
        this.pamars.group_buy_id = this.$route.query.id
        this.pamars.group_buy_goods_id = this.$route.query.activeId
        if (this.pamars.status === '') {
          delete (this.pamars.status)
        }
        seviceApi.groupbuyTeam(this.pamars).then(res => {
          if (res && res.data.code == 200) {
            this.dataList = res.data.page.list
            this.totalPage = res.data.page.totalCount
          }
        })
      },
      // 每页数
      sizeChangeHandle (val) {
        this.pamars.limit = val
        this.getList()
      },
      // 当前页
      currentChangeHandle (val) {
        this.pamars.page = val
        this.getList()
      },
      // 查询
      getDataList () {
        this.pamars.page = 1
        this.getList()
      },
      // 商品列表
      addOrUpdateHandle (id) {
        this.$router.push({name: 'gb-addList', query: {id: this.pamars.group_buy_id}})
  },
    // 拼团人员
      groupPeople (item) {
        this.dialogTableVisible = true
        seviceApi.groupbuyTeammember({team_id: item.id}).then(res => {
          if (res && res.data.code == 200) {
            this.peopleTable = res.data.list
          }
        })
      },
    // 返回拼团列表
      getBack () {
        this.$router.go(-1)
      }
    }
  }
</script>
<style>
  .mb10{
    margin-bottom: 10px;
  }
</style>
